<template>
    <div class="episode-container">
        <!-- 视频预览部分 -->
        <div class="video-panel">

            <!-- 预览的图片 -->
            <van-image width="100%" :src="episode.imgURL" fit="cover"/>

            <!-- 左上角的返回按钮 -->
            <van-icon name="clear" @click="$router.back()" />

            <!-- 右上方的搜索按钮 -->
            <van-button
                class="btn-search"
                round
                @click="$router.push('/search')"
            >
                <span>搜索更多</span>
                <van-icon name="search"></van-icon>
            </van-button>

            <!-- 中间的播放按钮 -->
            <div class="btn-play">
                <van-icon name="play-circle" />
            </div>

            <!-- 底部的视频标题部分 -->
            <div class="intro">
                <p class="name">
                    {{ episode.title }}
                </p>
                <p class="cate">
                    节目类型 | 分类 | {{ episode.imDbRatingCount || 2049 }}人看过
                </p>
            </div>
        </div>

        <!-- 视频简介部分 -->
        <div class="video-info">
            <van-cell class="abstract">
                <div class="alternal" v-if="!episode.abstract">
                    <h2>IMDb rank : {{ episode.rank }}</h2>
                    <h2>IMDb rating : {{ episode.imDbRating }}</h2>
                </div>
                {{ episode.abstract }}
            </van-cell>
            <van-cell class="staff">主创人员（导演&主演等）</van-cell>
            <van-tabs class="stars">
                <van-tab v-for="(item, index) in episode.stars" :key="index">
                    <template #title>
                        <div class="star">
                            <div class="avatar">
                                {{ item.slice(0, 1) }}
                            </div>
                            <div class="name">{{ item }}</div>
                        </div>
                    </template>
                </van-tab>
            </van-tabs>
        </div>

        <!-- 按钮部分 -->
        <div class="video-option">
            <van-row type="flex" justify="space-between" gutter="2">
                <van-col :span="5">
                    <van-button class="btn-like">
                        <van-icon name="like-o" />
                    </van-button>
                </van-col>
                <van-col :span="14">
                    <van-button class="btn-air">
                        <van-icon name="tv-o" />
                        投屏播放
                    </van-button>
                </van-col>
                <van-col :span="5">
                    <van-button class="btn-share">
                        <van-icon name="share-o" />
                    </van-button>
                </van-col>
            </van-row>
        </div>

        <!-- 视频推荐部分 -->
        <div class="video-recommend">
            <van-row>
                <p>更多精彩推荐</p>
            </van-row>

            <!-- 展示面板开始-->
      <div class="mybox" v-for="item in theRem" :key="item.id">
        <div class="jieshao">
          <p class="yingpian">大片放映</p>
          <p class="dianyingming">{{ item.name }}</p>
        </div>
        <div class="lunbotu">
          <div class="ImgURL">
            <van-image fit="cover" :src="item.imgURL" lazy-load />
          </div>
        </div>

        <div class="xiangqing">
          <p class="ppp">{{ item.film }}</p>
        </div>
      </div>
      <!-- 展示面板结束 -->
        </div>
    </div>
</template>

<script>
import { getVideoInfoById, getImdbTop100 } from '@/api/feng';
import { mapGetters } from 'vuex'
export default {
    props: {
        videoId: {
            type: [Number, String],
            required: true
        }
    },
    data() {
        return {
            episode: {},
            top100List: []
        };
    },
    created() {
        // 跳转到这个页面时
        // 调用获取视频详情的方法
        this.getVideoInfoById();
        // 获取top100 数据
        this.getTop100();
    },
    computed: {
        ...mapGetters(['theRem'])
    },
    methods: {
        // 获取imdbtop100榜单的数据
        async getTop100() {
            const { items } = await getImdbTop100();
            this.top100List = items;
        },

        // 根据id返回影片详情的函数
        async getVideoInfoById() {
            // 先去请求fastmock的数据, 看其中是否有路由传递过来的id
            const { data } = await getVideoInfoById(this.videoId);

            // 若 返回default 说明没有该id 那么就从top100的数据中去找
            if (data === 'default') {
                this.episode = this.top100List.find(
                    item => item.videoId === this.videoId
                );
                console.log(this.episode);
            } else {
                // 若有该id 直接将返回的数据赋值给episode
                this.episode = data;
                console.log(this.episode);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.episode-container {
    position: relative;
    text-align: left;
    font-size: 32px;
    .van-icon-clear {
        position: absolute;
        top: 16px;
        left: 20px;
        font-size: 56px;
        color: #bbb;
        opacity: 0.85;
    }
    .van-button.btn-search {
        position: absolute;
        top: 16px;
        right: 20px;
        width: 300px;
        height: 56px;
        color: #fff;
        opacity: 0.85;
        background-color: #bbb;
        outline: 0;
        border: 0;
        /deep/ .van-button__text {
            display: block;
            width: 100%;
            height: 100%;
            padding-left: 20px;
            line-height: 56px;
            span {
                float: left;
                font-size: 24px;
            }
            .van-icon {
                float: right;
                font-size: 40px;
                line-height: 56px;
            }
        }
    }
    .video-panel {
        position: relative;
        height: 500px;
        .van-image {
            height: 100%;
        }
        .btn-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 110px;
            width: 110px;
            background-color: #fff;
            border-radius: 70%;
            opacity: 0.8;
            /deep/ .van-icon-play-circle {
                transform: translate(-8px,-8px);
                font-size: 125px;
                color: #ff9800;
                opacity: 0.85;
            }
        }
        .intro {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 140px;
            background-color: #cecece;
            opacity: 0.85;
            p {
                margin: 0;
                padding: 0 40px;
                padding-top: 8px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            p.name {
                font: bold 56px "Microsoft Yahei";
            }
            p.cate {
                font: 28px "Microsoft Yahei";
            }
        }
    }

    .video-info {
        margin-top: 20px;
        padding: 0 40px;
        .van-cell {
            background-color: transparent;
            padding: 0;
        }
        .abstract {
            height: 204px;
            font-size: 28px;
            .van-cell__value {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                font: 28px/1.5 "Microsoft Yahei";
            }
        }
        .staff {
            margin-top: 30px;
            height: 40px;
            font-size: 28px;
            font-weight: bold;
            line-height: 40px;
        }
        .stars {
            margin-top: 20px;
            height: 186px;
            /deep/.van-tabs__wrap {
                height: 100%;
                background-color: #bbb;
                .van-tabs__nav {
                    padding: 0;
                    .van-tab {
                        background-color: #f2f2f2;
                        .star {
                            height: 186px;
                            width: 135px;
                            .avatar {
                                width: 130px;
                                height: 130px;
                                border-radius: 50%;
                                background-color: #ff9800;
                                opacity: 0.7;
                                text-align: center;
                                line-height: 130px;
                                color: #f2f2f2;
                                font-size: 38px;
                            }
                            .name {
                                text-align: center;
                                margin: 16px 0;
                            }
                        }
                    }
                    .van-tabs__line {
                        height: 0;
                    }
                }
            }
        }
    }
    .video-option {
        margin: 20px auto;
        padding: 0 40px;
        height: 160px;
        .van-row {
            height: 100px;
            .van-col {
                .van-button {
                    width: 100%;
                    height: 100%;
                    line-height: 100px;
                    border: 1px solid #111;
                    font-size: 36px;
                    .van-icon {
                        font-size: 48px;
                        transform: translateY(10px);
                    }
                }
                .btn-like {
                    border-radius: 30px 0 0 30px;
                }
                .btn-share {
                    border-radius: 0 30px 30px 0;
                }
            }
        }
    }

    .video-recommend {
        margin-top: 20px;
        padding: 0 40px;
        .recommendTabs {
            margin-top: 20px;
            height: 186px;
            /deep/.van-tabs__wrap {
                height: 100%;
                background-color: #bbb;
                .van-tabs__nav {
                    padding: 0;
                    .van-tab {
                        background-color: #f2f2f2;
                        .recommendItem {
                            height: 186px;
                            .avatar {
                                width: 130px;
                                height: 130px;
                            }
                            .name {
                                text-align: center;
                                margin: 16px 0;
                            }
                        }
                    }
                    .van-tabs__line {
                        height: 0;
                    }
                }
            }
        }
    }
    //艳萍的样式
    .mybox {
    background-color: #fff;
    border-radius: 10%;
    clear: both;
    width: 90%;
    // height: 800px;
    margin: 0 auto;
    padding-top: 20px;
    font-size: 20px;
    margin-bottom: 40px;
  }
  .yingpian {
    // float: left;
    font-size: 30px;
    text-align: left;
  }
  .dianyingming {
    // float: left;
    font-size: 50px;
    font-weight: 700;
    text-align: left;
    line-height: 1px;
  }
  .strimg {
    clear: both;
    padding-top: 100px;
  }
  .lunbotu {
    background-color: transparent;
    width: 80%;
    // height: 330px;
    top: 350px;
    margin: 0 auto;
    .ImgURL {
      width: 100%;
      // height: 390px;
    }
  }

  .jieshao,
  .xiangqing {
    width: 80%;
    height: 150px;
    background-color: transparent;
    margin: 0 auto;
  }
  .ppp {
    font-size: 30px;
    text-align: left;
  }
}
</style>
